<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>批量导入</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="../../../../yl/index.css" />
    <link rel="stylesheet" href="../../../style/index.css" />
  </head>

  <body>
    <div id="app" v-cloak>
      <div class="title">
        <el-button
          style="margin: 0; margin-right: 10px"
          :disabled="loading"
          type="danger"
          @click="goBack"
          >返回</el-button
        >
        <el-button
          style="margin: 0; margin-right: 10px"
          :disabled="loading"
          type="warning"
          @click="downloadTemplate"
          >下载导入模板</el-button
        >
        <el-upload
          class="upload-demo"
          style="display: inline-block"
          ref="upload"
          action=""
          accept=".xls,.xlsx"
          :on-change="(file,row)=>{this.handleUpload(file,row)}"
          :show-file-list="false"
          :auto-upload="false"
        >
          <el-button
            style="margin: 0; margin-right: 10px"
            :disabled="loading"
            type="primary"
            slot="trigger"
            >选择文件</el-button
          >
        </el-upload>
        <el-button
          style="margin: 0; margin-right: 10px"
          :disabled="loading"
          type="success"
          @click="submitUpload(0)"
          >上传</el-button
        >
        <el-button
          style="margin: 0; margin-right: 10px"
          :disabled="loading"
          type="danger"
          @click="handleClean"
          >清空</el-button
        >
        <el-badge
          :value="success"
          style="margin-left: 10px"
          class="item"
          type="success"
        >
          <el-button>成功</el-button>
        </el-badge>
        <el-badge style="margin-left: 10px" :value="error" class="item">
          <el-button>失败</el-button>
        </el-badge>
      </div>
      <div class="body">
        <el-table
          :data="tableData.slice((form.page-1)*form.limit,form.page*form.limit)"
          stripe
          border
          style="width: 100%"
          height="calc(100vh - 180px)"
          :expand-all="true"
        >
          <el-table-column
            type="index"
            width="60"
            align="center"
            label="序号"
          ></el-table-column>
          <el-table-column
            label="上报人姓名"
            width="250"
            align="center"
            prop="complaintperson"
          >
            <template v-slot="{row}">
              <el-input
                v-if="row.isEdit"
                v-model="row.complaintperson"
              ></el-input>
              <span v-else>{{row.complaintperson}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="上报人联系方式"
            align="center"
            width="250"
            prop="complaintperson_mobile"
          >
            <template v-slot="{row}">
              <el-input
                v-if="row.isEdit"
                v-model="row.complaintperson_mobile"
              ></el-input>
              <span v-else>{{row.complaintperson_mobile}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="事件来源"
            width="250"
            align="center"
            prop="Source"
          >
            <template v-slot="{row}">
              <el-input v-if="row.isEdit" v-model="row.Source"></el-input>
              <span v-else>{{row.Source}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="内容"
            align="center"
            width="250"
            prop="content"
          >
            <template v-slot="{row}">
              <el-input v-if="row.isEdit" v-model="row.content"></el-input>
              <span v-else>{{row.content}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="村行政编号"
            width="250"
            align="center"
            prop="Village_SerialNumber"
          >
            <template v-slot="{row}">
              <el-input
                v-if="row.isEdit"
                v-model="row.Village_SerialNumber"
              ></el-input>
              <span v-else>{{row.Village_SerialNumber}}</span>
            </template>
          </el-table-column>
          <el-table-column label="标题" align="center" width="250" prop="title">
            <template v-slot="{row}">
              <el-input v-if="row.isEdit" v-model="row.title"></el-input>
              <span v-else>{{row.title}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="详细地址"
            align="center"
            width="250"
            prop="Address"
          >
            <template v-slot="{row}">
              <el-input v-if="row.isEdit" v-model="row.Address"></el-input>
              <span v-else>{{row.Address}}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" width="100">
            <template v-slot="{row}">
              <el-tag
                :type="row.isStatus === '1' ? 'success' : row.isStatus === '2' ? 'danger' : 'info'"
                >{{ row.isStatus === '1' ? '成功' : row.isStatus === '2' ?
                '失败' : '待导入' }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column label="原因说明" align="center" width="150">
            <template v-slot="{row}"> {{row.Cause}} </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="180">
            <template v-slot="{row,$index}">
              <el-button
                size="small"
                :disabled="loading"
                :type="row.isEdit?'success':'primary'"
                @click="handleEdit(row)"
                >{{row.isEdit?'保存':'修改'}}
              </el-button>
              <el-button
                size="small"
                :disabled="loading"
                type="danger"
                @click="handleRemove($index)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-sizes="[15, 30 , 60 ,100, 200, 300, 400]"
        :page-size="form.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
      >
      </el-pagination>
      <!-- 选择工作簿的弹窗 -->
      <el-dialog title="请选择要上传的工作簿" v-model="dialogFormVisible">
        <!-- 弹窗内表单：对应修改后的dialogForm -->
        <el-form :model="dialogForm" style="margin-block: 35px">
          <el-form-item label="工作簿" :label-width="formLabelWidth">
            <!-- 单个选择框，绑定选中值 -->
            <el-select
              v-model="dialogForm.selectedWorkbook"
              placeholder="请选择工作簿"
              style="width: 100%"
            >
              <!-- 循环工作簿列表生成选项 -->
              <el-option
                v-for="(sheetName, index) in workbookList"
                :key="index"
                :label="sheetName"
                :value="sheetName"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <!-- 底部按钮：关闭弹窗逻辑不变 -->
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirm">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <script src="../../../utils/utils.js"></script>
    <script src="../../../config/config.js"></script>
    <script src="../../../utils/mixins.js"></script>
    <script src="../../../yl/vue.js"></script>
    <script src="../../../yl/index.js"></script>
    <script src="../../../yl/zh-cn.mjs"></script>
    <script src="../../../yl/index.iife.min.js"></script>
    <script src="../../../yl/jquery.min.js"></script>
    <script src="../../../utils/jquery.cookie.js"></script>
    <script src="../../../api/request.js"></script>
    <script src="../../../utils/ID_Validity.js"></script>
    <script src="../../../utils/xlsx.full.min.js"></script>
    <script type="text/javascript" src="js/import.js"></script>
  </body>
</html>
